<template>
	<view class="p-20">
		<view v-show="!ifCheckOrigin">
			<set-input placeholder="原安全密码" @input="getOrigin" class="m-b-15"></set-input>
		</view>
		<view v-show="ifCheckOrigin">
			<set-input placeholder="新安全密码" @input="changePassword" class="m-b-15"></set-input>
			<set-input placeholder="再次输入新安全密码" @input="changePasswordAgin" class="m-b-30"></set-input>
		</view>
		<u-button shape="circle" color="#000000" size="large" @click="confirm">确认</u-button>
		<view class="text-center f-base m-t-15" @click="toPage('forgetPassword')">忘记密码？</view>
		<!-- <view class="text-center f-base tip">每月仅可修改一次</view> -->
	</view>
</template>

<script>
	import setInput from './common/setInput.vue'
	import {setPasswordApi,checkPasswordApi} from '../../api/collection.js'
	import md5 from 'js-md5';
	export default {
		components: {
			setInput
		},
		data() {
			return {
				origin: '',
				password: '',
				newPassword: '',
				ifCheckOrigin:false,
			}
		},
		methods: {
			getOrigin(val) {
				this.origin = val
			},
			toPage(name) {
				uni.navigateTo({
					url: `./${name}`
				})
			},
			changePassword(val) {
				this.password = val
			},
			changePasswordAgin(val) {
				this.newPassword = val
			},
			async confirm() {
				try{
					if(!this.ifCheckOrigin){
						if(!this.origin){
							uni.showToast({
								title: '密码不能为空',
								icon: 'none'
							})
							return
						}
						uni.showLoading({
							title:'正在校验...',
							mask:true
						})
						//校验原密码
						const checkRes = await checkPasswordApi({
							code:md5(this.$store.state.basePassword + this.origin)
						})
						setTimeout(()=> {
							uni.hideLoading()
							this.ifCheckOrigin = true
						}, 800);
						return
					}
					switch (true) {
						case !this.password || !this.newPassword || !this.origin:
							uni.showToast({
								title: '密码不能为空',
								icon: 'none'
							})
							break;
						case !uni.$u.test.number(this.password) || this.password.length !== 6:
							uni.showToast({
								title: '请输入6位数字安全密码',
								icon: 'none'
							})
							break;
						case this.password !== this.newPassword:
							uni.showToast({
								title: '两次输入密码不一致',
								icon: 'none'
							})
							break;
						default:
							console.log('验证码成功')
							this.modifyPassword()
							break;
					}
					
				}catch(e){
					uni.hideLoading()
					uni.showToast({
						title: e.message || e.data,
						icon: 'none'
					})
				}
			},
			//修改密码
			async modifyPassword(){
				try{
					
					uni.showLoading({
						title:'请稍后',
						mask:true
					})
					//校验原密码
					const checkRes = await checkPasswordApi({
						code:md5(this.$store.state.basePassword + this.origin)
					})
					//修改密码
					const modifyRes = await setPasswordApi({
						code: md5(this.$store.state.basePassword + this.password),
						repeat:md5(this.$store.state.basePassword + this.newPassword),
						type:2
					})
					uni.hideLoading()
					uni.showToast({
						title: '修改成功',
						icon: 'none'
					})
					setTimeout(()=> {
						uni.navigateBack({
							delta:2
						})
					}, 2000);
				}catch(e){
					uni.hideLoading()
					//TODO handle the exception
					uni.showToast({
						title: e.message || e.data,
						icon: 'none'
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tip {
		position: absolute;
		bottom: 100rpx;
		left: 0;
		opacity: 0.5;
		width: 100%;
	}
</style>
